<template>
  <div class="profile-edit-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="编辑个人资料"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <!-- 头像上传区域 -->
    <div class="avatar-container">
      <van-uploader
        class="avatar-uploader"
        :after-read="afterReadAvatar"
        :max-count="1"
        multiple
      >
        <van-image
          class="avatar-image"
          round
          :src="userInfo.avatar"
          alt="用户头像"
        />
      </van-uploader>
      <div class="avatar-text">点击更换头像</div>
    </div>

    <!-- 个人信息表单 -->
    <van-field
      v-model="userInfo.nickname"
      label="昵称"
      placeholder="请输入昵称"
      :border="false"
    />
    <van-divider />

    <van-field
      v-model="userInfo.gender"
      label="性别"
      :border="false"
      @click="showGenderPicker"
    >
      <template #input>
        <van-cell-group>
          <van-cell :value="userInfo.gender" clickable />
        </van-cell-group>
      </template>
    </van-field>
    <van-divider />

    <van-field
      v-model="userInfo.birthday"
      label="生日"
      :border="false"
      @click="showBirthdayPicker"
    >
      <template #input>
        <van-cell-group>
          <van-cell :value="userInfo.birthday" clickable />
        </van-cell-group>
      </template>
    </van-field>
    <van-divider />

    <van-field
      v-model="userInfo.phone"
      label="手机号"
      placeholder="请输入手机号"
      :border="false"
      type="tel"
    />
    <van-divider />

    <van-field
      v-model="userInfo.email"
      label="邮箱"
      placeholder="请输入邮箱"
      :border="false"
      type="email"
    />
    <van-divider />

    <van-field
      v-model="userInfo.signature"
      label="个性签名"
      placeholder="请输入个性签名"
      :border="false"
      rows="3"
      type="textarea"
    />

    <!-- 底部保存按钮 -->
    <div class="save-button-container">
      <van-button type="primary" round @click="saveProfile">
        保存
      </van-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 模拟的用户数据
const userInfo = ref({
  avatar: 'https://picsum.photos/200/200?random=1',
  nickname: '阳光沙滩',
  gender: '男',
  birthday: '1990-05-15',
  phone: '13800138000',
  email: 'example@mail.com',
  signature: '享受生活，热爱旅行'
});

// 模拟函数
const onClickLeft = () => {
  console.log('返回上一页');
};

const afterReadAvatar = (file) => {
  console.log('上传头像:', file);
  // 模拟上传成功后更新头像
  userInfo.value.avatar = 'https://picsum.photos/200/200?random=' + Math.floor(Math.random() * 100);
};

const showGenderPicker = () => {
  console.log('显示性别选择器');
};

const showBirthdayPicker = () => {
  console.log('显示生日选择器');
};

const saveProfile = () => {
  console.log('保存个人资料:', userInfo.value);
  // 模拟保存成功提示
  alert('保存成功');
};
</script>

<style scoped>
.profile-edit-page {
  background-color: #f8f8f8;
  min-height: 100vh;
}

.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 0;
  background-color: #fff;
  margin-bottom: 15px;
}

.avatar-uploader {
  margin-bottom: 10px;
}

.avatar-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.avatar-text {
  color: #999;
  font-size: 14px;
}

.save-button-container {
  padding: 20px 15px;
}
</style>
    